<template>
  <Row class="pay" :gutter="16" v-if="show">
    <Col :lg="11" :md="12" :sm="24" :xs="24">
      <Row>
          <Col :lg="24" :md="24" :sm="24" :xs="24">
              <h2>{{ pay_list.official.channel }}</h2>
              <h3>{{ pay_list.official.desc }}</h3>
              <ul>
                  <li v-for="(item2, index2) in pay_list.official.detail" :key="index2">
                    <div>
                        <i :class="item2.channel_icon"></i>{{ item2.channel_name }}<span :class="item2.sign_status === '已签约' ? 'payactive' : ''">{{ item2.sign_status }}</span><span class="fr" :class="item2.is_enable === '已启用' ? 'upactive' : ''">{{ item2.is_enable }}</span>
                    </div>
                    <p>{{ item2.desc }}</p>
                  </li>
              </ul>
          </Col> 
      </Row>
      <Row>
          <Col :lg="24" :md="24" :sm="24" :xs="24">
              <h2>{{ pay_list.pingan.channel }}</h2>
              <h3>{{ pay_list.pingan.desc }}</h3>
              <ul>
                  <li v-for="(item3, index3) in pay_list.pingan.detail" :key="index3">
                    <div>
                        <i :class="item3.channel_icon"></i>{{ item3.channel_name }}<span :class="item3.sign_status === '已签约' ? 'payactive' : ''">{{ item3.sign_status }}</span><span class="fr" :class="item3.is_enable === '已启用' ? 'upactive' : ''">{{ item3.is_enable }}</span>
                    </div>
                    <p>{{ item3.desc }}</p>
                  </li>
              </ul>
          </Col> 
      </Row>
    </Col>
    <Col :lg="11" :md="12" :sm="24" :xs="24">
      <Row>
        <Col :lg="24" :md="24" :sm="24" :xs="24">
              <h2>{{ pay_list.ws.channel }}</h2>
              <h3>{{ pay_list.ws.desc }}</h3>
              <ul>
                  <li v-for="(item4, index4) in pay_list.ws.detail" :key="index4">
                    <div>
                        <i :class="item4.channel_icon"></i>{{ item4.channel_name }}<span :class="item4.sign_status === '已签约' ? 'payactive' : ''">{{ item4.sign_status }}</span><span class="fr" :class="item4.is_enable === '已启用' ? 'upactive' : ''">{{ item4.is_enable }}</span>
                    </div>
                    <p>{{ item4.desc }}</p>
                  </li>
              </ul>
        </Col>
      </Row>
    </Col>
            
  </Row>
</template>

<script>
import { baseInfoChannel } from '@/api/basic'

export default {
    name: 'own-pay',
    data(){
      return{

        // v-for 排序 左右分开 待续
          pay_list:[],
          show: false
      }
    },
    methods: {
      init() {
          this.show = false
        	baseInfoChannel().then(response => {
            if (response.data.code === 0) {
              this.pay_list = response.data.data
              this.show = true
            } else {
              this.$Message.error(response.data.message)
            }
				})
      }
    },
    created() {
      this.init()
    }
}
</script>

<style lang="less" scoped>
  @import '../own-space.less';
</style>
